<template>
    <div class="wrapper">
        <AsideTitle :headeline="headeline" :icon="icon"></AsideTitle>
        <Articlecom @edit="handleEdit" :articelObj="editform"></Articlecom>
        <!-- 弹框 -->
        <el-dialog :title="diatitle" :visible.sync="dialogShow" width="50%">
            <el-form ref="form" :model="editform" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="editform.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <QuillUpload
                        @quillEdit="handleQuill"
                        :uploadName="uploadintro"
                        :editform="editform"
                    ></QuillUpload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import AsideTitle from "@/components/asideTitle";
import Articlecom from "@/components/articlecom";
import QuillUpload from "@/components/quillUpload";
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // toggled buttons
    ["blockquote", "code-block"],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }], // superscript/subscript
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction

    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ["link", "image", "video"],
    ["clean"] // remove formatting button
];
export default {
    components: {
        AsideTitle,
        Articlecom,
        QuillUpload
    },
    data() {
        return {
            bizType: "acceptMethod",
            headeline: "受理方式",
            icon: "fa-wrench",
            dialogShow: false,
            editform: {
                title: "",
                content: "",
                imgUrl: "",
                acceptMethod: "acceptMethod",
                bizType: "acceptMethod"
            },
            uploadintro: "uploadintro",
            diatitle: "" //diolog标题
        };
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        //获取数据
        async getDataList() {
            let { data: res } = await this._API.queryByBizType({
                bizType: this.bizType
            });
            console.log(res);
            if (res.code == 0) {
                this.formList = res.data;
                if (this.formList.length != 0) {
                    this.editform = res.data[0];
                }
            }
        },
        //点击修改按钮触发
        handleEdit() {
            this.dialogShow = true;
            if (this.formList.length == 0) {
                this.diatitle = "新增文章";
            } else {
                this.diatitle = "编辑文章";
                if (this.formList.length != 0) {
                    this.editform = this.formList[0];
                }
            }
        },
        //监听quill内容变化
        handleQuill(val) {
            console.log(val);
            this.editform.content = val;
        },
        //点击确定

        async submitForm() {
            if (this.editform.title == "") {
                this.$message.warning("标题不能为空");
                return false;
            }
            if (this.editform.content === "") {
                this.$message.warning("内容不能为空");
                return false;
            }

            if (this.diatitle == "新增文章") {
                //新增文章
                let { data: res } = await this._API.add(this.editform);
                if (res.code == 0) {
                    this.$message.success("新增成功");

                    this.getDataList();

                    this.dialogShow = false;
                }
            } else {
                //编辑文章

                let { data: res } = await this._API.add(this.editform);
                console.log(res);

                if (res.code == 0) {
                    this.$message.success("编辑成功");
                    console.log(res);

                    this.getDataList();

                    this.dialogShow = false;
                }
            }
        }
    }
};
</script>

<style>
</style>